<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>文件树</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="fontawesome-free-5.11.2/css/all.min.css" media="all">    
    <link rel="stylesheet" href="css/common.css">
	<style>
    .file-tree-wrap {height:300px;max-height:300px;overflow:auto;padding:10px 20px;border-bottom:1px solid #ddd;}
    .file-tree-wrap a {color:#333;display: block;line-height:32px;white-space:nowrap;}
    .file-tree-wrap a:hover {background:#f1f6fd;}
    .treeview>li>ul {padding-left:15px;}
    .tree {position: relative;padding-left:40px;}
    .tree:before,.tree:after {font-family:"Font Awesome 5 Free";font-size:14px;position: absolute;color:#ffbc00;top:0;}
    .tree:before {content:'\f07b';left:20px;}
    .tree-children:after {font-family:"layui-icon";content:'\e624';font-size:12px;left:3px;color:#333;}
    .tree-children-open:after {content:'\e67e';}
    .tree-children-open:before {content:'\f07c';font-size:15px;}
    .tree.selected {background-color:#e0ebf9;}
	</style>      
</head>
<body style="background:#fff;">
    <!-- 隐藏的赋值input，在父层弹层的js中，yes回调直接获取此id的value，知道选择的是哪个文件夹 -->
    <input type="text" id="treename" value="默认给个根目录的值" hidden>
    <div class="file-tree-wrap">
        <ul class="treeview">
        </ul>
    </div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
    //文件数模拟目录
    var filetreeDate = [
        {
            "file":"目录1"
        },
        {
            "file":"目录2",
            "children":true
        },
        {
            "file":"目录3",
            "children":true
        },
    ];
    console.log(filetreeDate)



    /*
     *  先生成树结构，data-id 位置可修改成任何键值，主要是为了知道选择了哪个文件夹，点击时候再提取下，赋值给隐藏的input
     *  class 名称
     *  tree                目录树，默认
     *  tree-children       有子目录
     *  tree-children-open  展开的目录
     *  loaded="true"       已加载
     */
    var _treeList = ''; //文件目录
    var _treeAllFile;   //全部文件目录
    filetreeDate.map(function(d){
        _treeList += '<li><a href="javascript:;" class="'+(d.children?"tree tree-children":"tree")+'" data-id="文件id">'+d.file+'</a></li>';
    })
    _treeAllFile = '<li><a href="javascript:;" class="tree tree-children tree-children-open selected" data-id="文件id" loaded="true">全部文件</a><ul>'+_treeList+'</ul></li>';
    $('.treeview').html(_treeAllFile);

    //存在子目录的文件夹点击
    $(document).on('click','.tree-children',function(){
        $(this).toggleClass('tree-children-open');
        $(this).next('ul').toggle();
        //判断是否已加载过子目录,已加载的就不再重复
        var _loaded = $(this).attr('loaded');
        if(!_loaded){        
            //向后台查询,成功后加载子目录结构
            // $.ajax({
            //     url:'',
            //     type:'',
            //     success:function(){
                    $(this).attr('loaded',true);//添加已加载标记
                    //生成子目录树，演示内容直接把结构输出了
                    $(this).after('<ul style="padding-left:20px;"><li><a href="javascript:;" class="tree" data-id="文件id">三级子目录</a></li><li><a href="javascript:;" class="tree tree-children" data-id="文件id">三级子目录</a></li></ul>');
            //     }
            // })
        }
    })

    //选中当前文件夹，获取相关的值
    $(document).on('click','.tree',function(){
        $('.treeview').find('.tree').removeClass('selected');
        $(this).addClass('selected');
        var _id = $(this).data('id');
        $('#treename').val(_id);//给隐藏input赋值，弹层确定时会获取
    })
})

</script>
</html>
